<template>
  <div class="container">
    <!-- 顶部标题区 -->
    <div class="header">
      <div class="title">{{guideData.title}}</div>
      <div class="sub-title">{{guideData.routeOverview}}</div>
    </div>

    <!-- 地图区域 -->
    <div class="map-wrapper" :style="{height: mapHeight + 'px'}">
      <map 
        :longitude="mapCenter.longitude" 
        :latitude="mapCenter.latitude" 
        :scale="mapScale" 
        :markers="currentMarkers" 
        :polyline="currentPolyline" 
        show-location
        class="map"
        style="transition: all 0.3s ease;"
      ></map>
      
      <!-- 拖拽条 -->
      <div class="drag-handle" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
        <div class="drag-icon"></div>
      </div>
    </div>

    <!-- 内容滚动区 -->
    <scroll-view class="content" :style="{height: contentHeight + 'px'}" scroll-y>
      <div class="weather-section">
        <div class="section-title">🌤️ 三日天气预报</div>
        <swiper class="weather-swiper" 
                :indicator-dots="true" 
                indicator-color="rgba(255,255,255,0.5)" 
                indicator-active-color="#1E90FF" 
                :circular="true" 
                :autoplay="true" 
                :interval="3000" 
                :duration="500">
          <swiper-item v-for="(weather, index) in m" :key="index">
            <div class="weather-card" :style="weather.bgStyle">
              <div class="weather-header">
                <div class="weather-date">{{weather.a}}</div>
                <div class="weather-icon">{{weather.b}}</div>
              </div>
              <div class="weather-info">{{weather.c}}</div>
              <div class="weather-temp">{{weather.d}}</div>
              <div class="weather-wind">{{weather.e}}</div>
              <div class="weather-tips">💡 {{weather.f}}</div>
            </div>
          </swiper-item>
        </swiper>
      </div>
      
      <!-- 日程Tab -->
      <div class="section timeline">
        <div class="tab-bar">
          <div class="tab-item" 
               v-for="(item, index) in guideData.timeline" 
               :key="item.period" 
               :class="{active: activeTab === index}"
               @click="switchTab(index)">
            <div>{{item.period}}</div>
          </div>
        </div>
        
        <div class="timeline-list" :class="{'animate-content': animateContent}">
          <div class="timeline-item" 
               v-for="(event, index) in guideData.timeline[activeTab].events" 
               :key="event.time"
               :class="{active: activeEvent === index}"
               @click="focusOnLocation(event.location, index)">
            <div class="time">{{event.time}}</div>
            <div class="event">
              <div class="event-title">{{event.title}}</div>
              <div class="event-address">{{event.address}}</div>
              <div class="event-desc">{{event.description}}</div>
              <div class="event-tags">
                <div v-if="event.ticket" class="tag ticket">{{event.ticket}}</div>
                <div v-if="event.openingHours" class="tag time">{{event.openingHours}}</div>
                <div v-if="event.transportInfo" class="tag transport">{{event.transportInfo}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 美食推荐 -->
      <div class="section dining">
        <div class="section-header" @click="toggleSection('showFood')">
          <div class="section-title">海南必吃美食</div>
          <div class="toggle-icon">{{showFood ? '▼' : '▶'}}</div>
        </div>
        
        <div class="food-container" v-if="showFood">
          <div class="food-grid">
            <div class="food-card" 
                 v-for="(food, index) in guideData.dining.specialties.items" 
                 :key="food.name"
                 @click="openFoodDetail(index)">
              <div class="food-img" :style="{backgroundColor: getFoodColor(index)}">
                <div class="food-icon">{{food.icon}}</div>
              </div>
              <div class="food-info">
                <div class="food-name">{{food.name}}</div>
                <div class="food-desc">{{food.desc}}</div>
                <div class="food-tag">必吃</div>
              </div>
              <div class="food-arrow">→</div>
            </div>
          </div>
          
          <!-- 美食详情模态框 -->
          <div class="food-modal" :class="{show: showFoodModal}" @click="closeFoodDetail">
            <div class="modal-content" :animation="modalAnimation" @click.stop>
              <div class="modal-header">
                <div class="modal-title">{{currentFood?.name}}</div>
                <div class="modal-close" @click="closeFoodDetail">×</div>
              </div>
              <div class="modal-body">
                <div class="modal-img">{{currentFood?.icon}}</div>
                <div class="modal-desc">{{currentFood?.desc}}</div>
                <div class="modal-section">
                  <div class="section-title">推荐店铺</div>
                  <div class="shops" v-for="shop in currentFood?.shops" :key="shop.id">
                    <div class="shop-name">{{shop.name}}</div>
                    <div class="shop-location">📍 {{shop.location}}</div>
                    <div class="shop-price">💰 {{shop.price}}</div>
                  </div>
                </div>
                <div class="modal-section">
                  <div class="section-title">小贴士</div>
                  <div class="tips-text">{{currentFood?.tips}}</div>
                </div>
              </div>
              <div class="modal-footer">
                <button class="save-btn" @click="saveFood">{{isSavedFood ? '已收藏' : '收藏美食'}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实用提示 -->
      <div class="section tips">
        <div class="section-header" @click="toggleSection('showTips')">
          <div class="section-title">实用提示</div>
          <div class="toggle-icon">{{showTips ? '▼' : '▶'}}</div>
        </div>
        
        <div class="tips-container" v-if="showTips">
          <div class="tips-grid">
            <div class="tip-card" v-for="(tip, index) in guideData.tips" :key="tip.title" 
                  @click="toggleTip(index)">
              <div class="tip-header" :class="{expanded: tipsExpanded[index]}">
                <div class="tip-icon">💡</div>
                <div class="tip-title">{{tip.title}}</div>
                <div class="tip-toggle">{{tipsExpanded[index] ? '−' : '+'}}</div>
              </div>
              <div class="tip-content" :class="{expanded: tipsExpanded[index]}">
                <div class="tip-desc" v-if="tip.content">{{tip.content}}</div>
                <div class="tip-items" v-if="tip.items">
                  <div class="tip-item" v-for="(item, itemIndex) in tip.items" :key="itemIndex">
                    <div class="item-icon">🔹</div>
                    <div class="item-text">{{item}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 返回顶部按钮 -->
      <div class="back-to-top" @click="scrollToTop" v-if="contentHeight > 500">
        <div>↑</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 布局控制
      mapHeight: 380,
      contentHeight: 420,
      isDragging: false,
      startY: 0,
      startMapHeight: 0,
      
      // 交互状态
      activeTab: 0,
      activeEvent: null,
      showWeather: true,
      showFood: true,
      showTips: true,
      tipsExpanded: [false, false, false],
      showFoodModal: false,   // 美食详情模态框
      currentFood: null,      // 当前选中的美食
      isSavedFood: false,     // 是否收藏当前美食
      savedFoods: [],         // 已收藏的美食ID
      
      // 动画控制
      animateContent: false,
      modalAnimation: null,   // 模态框动画
      
      // 地图配置
      mapCenter: { longitude: 109.8, latitude: 19.2 },
      mapScale: 8,
      markers: [],
      polyline: [],
      currentMarkers: [],
      currentPolyline: [],
      
      // 旅行数据
      guideData: {
        title: "海南三天两晚旅行攻略：海口-三亚-亚龙湾",
        weather: {
          summary: [
            { day: "2025-06-13", weather: "中雨转大雨", temperature: "25°C - 29°C", wind: "东南风3-4级", tips: "建议携带雨具" },
            { day: "2025-06-14", weather: "大雨转多云", temperature: "25°C - 28°C", wind: "西南风3-4级", tips: "室内景点优先" },
            { day: "2025-06-15", weather: "雷阵雨转多云", temperature: "26°C - 34°C", wind: "北风1-3级", tips: "午后适合海滩活动" }
          ]
        },
        routeOverview: "美兰机场→海口市区→三亚市区→亚龙湾→返程",
        timeline: [
          {
            period: "Day 1",
            events: [
              { time: "14:00", title: "抵达海口", address: "海口美兰机场", description: "从机场驱车14公里至市区", transportInfo: "驾车14公里/30分钟", location: "110.329481,20.021112" },
              { time: "15:00", title: "骑楼老街", address: "海口市龙华区博爱路", description: "百年历史骑楼建筑群", ticket: "免费", openingHours: "09:00-21:00", location: "110.194686,20.012873" },
              { time: "18:00", title: "海南鸡饭", address: "海口琼菜王", description: "海南特色白切鸡配椰香饭", transportInfo: "距骑楼老街2公里/10分钟", location: "110.206759,20.008123" }
            ]
          },
          {
            period: "Day 2",
            events: [
              { time: "08:00", title: "南山文化旅游区", address: "三亚市崖州区南山村", description: "佛教文化圣地，有南海观音像", ticket: "129元", openingHours: "08:00-18:00", location: "109.310726,18.297174" },
              { time: "12:30", title: "三亚湾海鲜广场", address: "三亚市三亚湾路", description: "品尝各种新鲜海鲜", transportInfo: "距南山寺约40公里/1小时", location: "109.473074,18.261108" },
              { time: "19:00", title: "椰梦长廊", address: "三亚市三亚湾路", description: "欣赏三亚湾绝美日落", transportInfo: "步行可达", location: "109.473074,18.261108" }
            ]
          },
          {
            period: "Day 3",
            events: [
              { time: "09:00", title: "亚龙湾热带天堂森林公园", address: "三亚市亚龙湾国家旅游度假区", description: "电影《非诚勿扰2》取景地", ticket: "175元", openingHours: "07:30-18:30", location: "109.567441,18.343007" },
              { time: "13:00", title: "亚龙湾海滩", address: "三亚市亚龙湾", description: "被誉为天下第一湾", transportInfo: "驾车约15分钟", location: "109.560024,18.316336" },
              { time: "16:00", title: "返程", address: "三亚凤凰国际机场", description: "结束愉快旅程", transportInfo: "驾车约40分钟", location: "109.412442,18.302734" }
            ]
          }
        ],
        dining: {
          specialties: {
            title: "海南必吃美食",
            items: [
              { 
                id: 1,
                name: "海南鸡饭", 
                icon: "🍚", 
                desc: "海南最有名的传统名菜，以白切鸡配油光黄澄的鸡油饭为主，鸡肉鲜嫩多汁，米饭香气四溢",
                shops: [
                  { id: 101, name: "板桥路鸡饭", location: "海口市龙华区板桥路", price: "人均35元" },
                  { id: 102, name: "三亚正宗鸡饭", location: "三亚市河西区", price: "人均40元" }
                ],
                tips: "正宗的海南鸡饭会搭配三种酱料：姜蓉、蒜蓉和辣椒酱，建议都尝试一下"
              },
              { 
                id: 2,
                name: "和乐蟹", 
                icon: "🦀", 
                desc: "海南四大名菜之一，产于万宁市和乐镇，膏满肉肥，味道鲜美，以清蒸最能体现其原味",
                shops: [
                  { id: 103, name: "和乐蟹海鲜城", location: "三亚市海棠湾", price: "人均150元" },
                  { id: 104, name: "海口海鲜广场", location: "海口市美兰区", price: "人均180元" }
                ],
                tips: "秋季的和乐蟹最肥美，挑选时以重量在250克左右的母蟹为佳，膏最多"
              },
              { 
                id: 3,
                name: "清补凉", 
                icon: "🥣", 
                desc: "海南经典解暑甜品，以椰奶或糖水为底，搭配绿豆、红豆、薏米、芋头等多种食材",
                shops: [
                  { id: 105, name: "老海南清补凉", location: "海口市骑楼老街", price: "人均15元" },
                  { id: 106, name: "三亚第一家清补凉", location: "三亚市天涯区", price: "人均18元" }
                ],
                tips: "建议选择椰奶底的清补凉，口感更浓郁；加冰后风味更佳，但肠胃敏感者建议少冰"
              },
              { 
                id: 4,
                name: "海南粉", 
                icon: "🍜", 
                desc: "海南米粉小吃，口感爽滑，配以花生、芝麻、竹笋、牛肉干等多种配料，淋上特制卤汁",
                shops: [
                  { id: 107, name: "亚妹海南粉", location: "海口市琼山区", price: "人均12元" },
                  { id: 108, name: "三亚港门粉店", location: "三亚市解放路", price: "人均15元" }
                ],
                tips: "吃海南粉前一定要充分拌匀，让每根粉条都裹上卤汁和配料，风味更佳"
              },
              { 
                id: 5,
                name: "椰子鸡", 
                icon: "🐔", 
                desc: "椰汁为汤底的特色火锅，以文昌鸡为主材，汤清甜爽口，鸡肉鲜嫩，营养丰富",
                shops: [
                  { id: 109, name: "四季椰子鸡", location: "三亚市亚龙湾", price: "人均120元" },
                  { id: 110, name: "海口原味椰鸡", location: "海口市龙华区", price: "人均100元" }
                ],
                tips: "椰子鸡的汤可以直接喝，建议先喝汤再涮菜；鸡肉蘸特制沙姜酱油更能体现鲜味"
              }
            ]
          }
        },
        tips: [
          {
            title: "旅行准备",
            content: "海南气候炎热多雨，建议携带以下物品：",
            items: ["防晒霜SPF50+", "遮阳帽和太阳镜", "轻便雨衣或雨伞", "舒适的沙滩鞋", "防蚊液"]
          },
          {
            title: "交通出行",
            content: "海南岛内交通便利，推荐以下出行方式：",
            items: ["海口/三亚市区建议使用网约车", "前往景区可选择旅游专线大巴", "自驾租车自由行（需注意停车问题）", "三亚部分景点可骑共享单车"]
          },
          {
            title: "美食推荐",
            content: "海南美食丰富多样，除了必吃的特色菜外，还可以尝试：",
            items: ["糟粕醋火锅", "陵水酸粉", "文昌鸡", "加积鸭", "东山羊"]
          }
        ]
      },
      m: [] // 天气数据
    }
  },
  
  mounted() {
    this.initMap();
    this.initLayout();
    this.initAnimation();
    this.initWeatherData();
    
    // 读取本地存储的收藏数据
    const savedFoods = uni.getStorageSync('savedFoods') || [];
    this.savedFoods = savedFoods;
  },
  
  methods: {
    // 初始化动画
    initAnimation() {
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      });
      this.modalAnimation = animation;
    },
    
    // 初始化地图数据
    initMap() {
      this.guideData.timeline.forEach((day, dayIdx) => {
        const points = [];
        const markers = [];
        
        day.events.forEach((event, evtIdx) => {
          const [longitude, latitude] = event.location.split(",").map(Number);
          
          // 添加标记点
          markers.push({
            id: dayIdx * 10 + evtIdx,
            longitude,
            latitude,
            title: event.title,
            iconPath: evtIdx === 0 
              ? "/static/start.png" 
              : evtIdx === day.events.length - 1 
                ? "/static/end.png" 
                : "/static/middle.png",
            width: 30,
            height: 30,
            callout: {
              content: event.title,
              color: "#FFFFFF",
              bgColor: "#FF7A00",
              padding: 10,
              borderRadius: 5,
              display: "ALWAYS"
            }
          });
          
          points.push({ longitude, latitude });
        });
        
        this.markers.push(markers);
        
        if (points.length > 1) {
          this.polyline.push({
            points,
            color: dayIdx === 0 ? "#FF7A00" : dayIdx === 1 ? "#34C759" : "#007AFF",
            width: 4,
            arrowLine: true,
            borderWidth: 1,
            borderColor: "#FFFFFF"
          });
        }
      });
      
      this.currentMarkers = this.markers[0] || [];
      this.currentPolyline = this.polyline[0] ? [this.polyline[0]] : [];
      
      this.adjustMapView();
    },
    
    // 更新当前Tab的地图显示
    updateMapForActiveTab() {
      this.currentMarkers = this.markers[this.activeTab] || [];
      this.currentPolyline = this.polyline[this.activeTab] ? [this.polyline[this.activeTab]] : [];
      
      this.adjustMapView();
    },
    
    // 调整地图视野
    adjustMapView() {
      if (this.currentMarkers.length === 0) return;
      
      if (this.currentMarkers.length === 1) {
        this.mapCenter = { ...this.currentMarkers[0] };
        this.mapScale = 14;
        return;
      }
      
      // 计算中心点和缩放级别
      const lats = this.currentMarkers.map(m => m.latitude);
      const lngs = this.currentMarkers.map(m => m.longitude);
      
      this.mapCenter = {
        latitude: (Math.max(...lats) + Math.min(...lats)) / 2,
        longitude: (Math.max(...lngs) + Math.min(...lngs)) / 2
      };
      this.mapScale = Math.max(...lats) - Math.min(...lats) > 0.5 ? 8 : 10;
    },
    
    // 初始化布局高度
    initLayout() {
      const { windowHeight } = uni.getSystemInfoSync();
      this.mapHeight = Math.floor(windowHeight * 0.4);
      this.contentHeight = windowHeight - Math.floor(windowHeight * 0.4) - 50;
    },
    
    // 切换日期Tab
    switchTab(index) {
      if (this.activeTab !== index) {
        this.activeTab = index;
        this.activeEvent = null;
        
        // 添加切换动画效果
        this.animateContent = true;
        setTimeout(() => {
          this.updateMapForActiveTab();
          this.animateContent = false;
        }, 300);
      }
    },
    
    // 聚焦到指定位置
    focusOnLocation(location, index) {
      const [longitude, latitude] = location.split(",").map(Number);
      
      this.mapCenter = { longitude, latitude };
      this.mapScale = 14;
      this.activeEvent = index;
    },
    
    // 拖拽调整地图和内容区高度
    handleTouchStart(e) {
      this.isDragging = true;
      this.startY = e.touches[0].clientY;
      this.startMapHeight = this.mapHeight;
    },
    
    handleTouchMove(e) {
      if (!this.isDragging) return;
      
      const deltaY = this.startY - e.touches[0].clientY;
      const { windowHeight } = uni.getSystemInfoSync();
      
      // 计算新的高度
      let newMapHeight = this.startMapHeight + deltaY;
      
      // 限制高度范围
      if (newMapHeight < 200) newMapHeight = 200;
      if (newMapHeight > windowHeight - 200) newMapHeight = windowHeight - 200;
      
      // 更新高度
      this.mapHeight = newMapHeight;
      this.contentHeight = windowHeight - newMapHeight - 50;
    },
    
    handleTouchEnd() {
      this.isDragging = false;
    },
    
    // 折叠/展开部分内容
    toggleSection(section) {
      this[section] = !this[section];
    },
    
    // 切换提示卡片的展开/折叠状态
    toggleTip(index) {
      const tipsExpanded = [...this.tipsExpanded];
      tipsExpanded[index] = !tipsExpanded[index];
      this.tipsExpanded = tipsExpanded;
    },
    
    initWeatherData() {
      const weatherData = [];
      const icons = ['☀️', '⛅', '🌧️', '🌦️', '🌩️', '❄️'];
      const conditions = ['晴天', '多云', '小雨', '中雨', '雷阵雨', '雾天'];
      const tips = [
        '适合户外活动', 
        '记得带伞', 
        '室内活动更佳', 
        '注意防雷', 
        '阳光明媚', 
        '出行注意安全'
      ];
      const windDirections = ['东风', '南风', '西风', '北风', '东南风', '东北风'];
      
      // 生成未来三天的天气
      for (let i = 0; i < 3; i++) {
        const date = new Date();
        date.setDate(date.getDate() + i);
        
        // 格式化日期为"周X 月/日"
        const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        const formattedDate = `${weekdays[date.getDay()]} ${date.getMonth() + 1}/${date.getDate()}`;
        
        // 随机天气状况
        const randomIndex = Math.floor(Math.random() * conditions.length);
        const condition = conditions[randomIndex];
        const icon = icons[randomIndex];
        const tip = tips[randomIndex];
        
        // 随机温度 (海南通常比较热)
        const minTemp = 24 + Math.floor(Math.random() * 5);
        const maxTemp = minTemp + 4 + Math.floor(Math.random() * 4);
        
        // 随机风速
        const windSpeed = 2 + Math.floor(Math.random() * 4);
        const windDirection = windDirections[Math.floor(Math.random() * windDirections.length)];
        
        // 根据天气设置背景颜色
        let bgStyle = '';
        if (condition.includes('晴')) {
          bgStyle = 'background: linear-gradient(135deg, #4A90E2 0%, #5C6BC0 100%);';
        } else if (condition.includes('雨')) {
          bgStyle = 'background: linear-gradient(135deg, #607D8B 0%, #455A64 100%);';
        } else if (condition.includes('多云')) {
          bgStyle = 'background: linear-gradient(135deg, #90A4AE 0%, #607D8B 100%);';
        } else {
          bgStyle = 'background: linear-gradient(135deg, #78909C 0%, #546E7A 100%);';
        }
        
        weatherData.push({
          a: formattedDate,
          b: icon,
          c: condition,
          d: `${minTemp}°C~${maxTemp}°C`,
          e: `${windDirection} ${windSpeed}级`,
          f: tip,
          bgStyle: bgStyle
        });
      }
      
      this.m = weatherData;
    },
    
    // 获取美食卡片颜色
    getFoodColor(index) {
      const colors = [
        '#FFF3E0', // 海南鸡饭 - 浅橙
        '#E3F2FD', // 和乐蟹 - 浅蓝
        '#E8F5E9', // 清补凉 - 浅绿
        '#FFF8E1', // 海南粉 - 浅黄
        '#FCE4EC'  // 椰子鸡 - 浅粉
      ];
      return colors[index % colors.length];
    },
    
    // 打开美食详情
    openFoodDetail(index) {
      const food = this.guideData.dining.specialties.items[index];
      const isSaved = this.savedFoods.includes(food.id);
      
      // 创建打开动画
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease-out'
      });
      animation.opacity(1).step();
      
      this.currentFood = food;
      this.showFoodModal = true;
      this.isSavedFood = isSaved;
      this.modalAnimation = animation.export();
      
      // 禁止背景滚动
      uni.setPageStyle({
        style: {
          overflow: 'hidden'
        }
      });
    },
    
    // 关闭美食详情
    closeFoodDetail() {
      // 创建关闭动画
      const animation = uni.createAnimation({
        duration: 200,
        timingFunction: 'ease-in'
      });
      animation.opacity(0).scale(0.9).step();
      
      this.modalAnimation = animation.export();
      
      // 动画结束后隐藏
      setTimeout(() => {
        this.showFoodModal = false;
        this.currentFood = null;
        
        // 恢复背景滚动
        uni.setPageStyle({
          style: {
            overflow: 'auto'
          }
        });
      }, 200);
    },
    
    // 阻止事件冒泡
    stopPropagation() {
      // 空函数，用于阻止事件冒泡到父元素
    },
    
    // 收藏美食
    saveFood() {
      if (!this.currentFood) return;
      
      const foodId = this.currentFood.id;
      let savedFoods = [...this.savedFoods];
      let isSaved = this.isSavedFood;
      
      if (isSaved) {
        // 取消收藏
        savedFoods = savedFoods.filter(id => id !== foodId);
      } else {
        // 添加收藏
        savedFoods.push(foodId);
        
        // 显示收藏成功提示
        uni.showToast({
          title: '收藏成功',
          icon: 'success',
          duration: 1500
        });
      }
      
      // 保存到本地存储
      uni.setStorageSync('savedFoods', savedFoods);
      
      this.savedFoods = savedFoods;
      this.isSavedFood = !isSaved;
    },
    
    // 平滑滚动到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  }
}
</script>

<style>
/* 基础样式 */
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 顶部标题 */
.header {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.sub-title {
  font-size: 26rpx;
  color: #666;
}

/* 地图区域 */
.map-wrapper {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.map {
  width: 100%;
  height: 100%;
}
.drag-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  border-top: 1px solid #eee;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.drag-icon {
  width: 60rpx;
  height: 6rpx;
  background-color: #ccc;
  border-radius: 3rpx;
}
.drag-handle:active {
  background-color: #eee;
}

/* 内容滚动区 */
.content {
  flex: 1;
  overflow-y: auto;
  position: relative;
  padding: 15rpx;
}

/* 通用区块样式 */
.section {
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  padding-left: 10rpx;
  border-left: 4rpx solid #FF7A00;
}
.toggle-icon {
  font-size: 24rpx;
  color: #999;
  transition: transform 0.3s ease;
}
.section-header:active .toggle-icon {
  color: #FF7A00;
}

.weather-section {
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 4rpx;
}

.weather-section {
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 4rpx solid #1E90FF;
}

.weather-swiper {
  height: 320rpx;  /* 增加轮播高度 */
  border-radius: 12rpx;
  overflow: hidden;
}

.weather-card {
  height: 100%;
  padding: 30rpx;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* 调整内容分布 */
  color: white;
  position: relative;
}

.weather-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 0;
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;  /* 增加底部间距 */
}

.weather-date {
  font-size: 28rpx;
  font-weight: bold;
}

.weather-icon {
  font-size: 60rpx;
}

.weather-info {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 5rpx 0;  /* 增加上下间距 */
}

.weather-temp {
  font-size: 30rpx;
  text-align: center;
  margin: 5rpx 0;  /* 增加上下间距 */
}

.weather-wind {
  font-size: 26rpx;
  text-align: center;
  margin: 5rpx 0;  /* 增加上下间距 */
  opacity: 0.8;
}

.weather-tips {
  font-size: 25rpx;
  text-align: center;
  padding: 15rpx 20rpx;  /* 增加左右内边距 */
  margin-top: 15rpx;
  flex: 1;  /* 允许提示区域占用剩余空间 */
  min-height: 100rpx;  /* 设置最小高度 */
  max-height: 200rpx;  /* 设置最大高度 */
  overflow-y: auto;  /* 超长内容显示滚动条 */
  scrollbar-width: none;  /* 隐藏滚动条但保留功能 */
  -ms-overflow-style: none;
}
.weather-tips::-webkit-scrollbar {
  display: none;  /* 隐藏WebKit浏览器的滚动条 */
}
/* 日程Tab */
.tab-bar {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
  transition: all 0.3s ease;
}
.tab-item:hover {
  color: #FF7A00;
}
.tab-item.active {
  color: #FF7A00;
  font-weight: bold;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3rpx;
  background-color: #FF7A00;
  transition: all 0.3s ease;
}

/* 时间轴 */
.timeline-list {
  padding-left: 10rpx;
}
.timeline-item {
  display: flex;
  margin-bottom: 30rpx;
  position: relative;
  transition: all 0.3s ease;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 30rpx;
  top: 50rpx;
  bottom: -30rpx;
  width: 2rpx;
  background-color: #eee;
}
.timeline-item:last-child::before {
  display: none;
}
.timeline-item:hover {
  transform: translateX(5rpx);
}
.timeline-item.active {
  transform: translateX(5rpx);
}
.timeline-item.active .time {
  color: #fff;
  background-color: #FF7A00;
}
.time {
  width: 80rpx;
  font-size: 26rpx;
  color: #FF7A00;
  font-weight: bold;
  text-align: center;
  padding: 8rpx 0;
  border-radius: 15rpx;
  background-color: #fff8f0;
  z-index: 1;
  transition: all 0.3s ease;
}
.event {
  flex: 1;
  padding: 15rpx 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  margin-left: 20rpx;
  transition: all 0.3s ease;
}
.event:hover {
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}
.event-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}
.event-address {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}
.event-desc {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 15rpx;
}
.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}
.tag {
  font-size: 22rpx;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
  transition: all 0.3s ease;
}
.tag:hover {
  transform: translateY(-2rpx);
}
.tag.ticket {
  background-color: #e8f4ea;
  color: #34C759;
}
.tag.time {
  background-color: #fff3cd;
  color: #FFC107;
}
.tag.transport {
  background-color: #e9f5ff;
  color: #007AFF;
}

/* 美食推荐样式 */
.food-container {
  padding: 10rpx 0;
}
.food-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}
.food-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  box-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.food-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.02);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.food-card:active::before {
  opacity: 1;
}
.food-card:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}
.food-card-hover {
  background-color: #fafafa;
}
.food-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.food-icon {
  font-size: 48rpx;
}
.food-info {
  flex: 1;
  padding-right: 15rpx;
}
.food-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.food-desc {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.food-tag {
  display: inline-block;
  margin-top: 8rpx;
  padding: 2rpx 12rpx;
  font-size: 20rpx;
  color: #FF7A00;
  background-color: #fff8f0;
  border-radius: 12rpx;
}
.food-arrow {
  font-size: 28rpx;
  color: #ccc;
  transition: transform 0.3s ease;
}
.food-card:hover .food-arrow {
  transform: translateX(5rpx);
  color: #FF7A00;
}

/* 美食详情模态框 */
.food-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.food-modal.show {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  width: 90%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: translateY(50rpx) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.food-modal.show .modal-content {
  transform: translateY(0) scale(1);
}
.modal-header {
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.modal-close {
  font-size: 40rpx;
  color: #999;
  transition: all 0.3s ease;
}
.modal-close:hover {
  color: #ff3b30;
  transform: rotate(90deg);
}
.modal-body {
  padding: 30rpx;
}
.modal-img {
  font-size: 80rpx;
  text-align: center;
  margin-bottom: 25rpx;
  text-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.1);
}
.modal-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px dashed #eee;
}
.modal-section {
  margin-bottom: 30rpx;
}
.modal-section .section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  padding-left: 0;
  border-left: none;
}
.shops {
  margin-bottom: 20rpx;
  padding: 15rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}
.shop-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}
.shop-location, .shop-price {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 3rpx;
}
.tips-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  padding: 15rpx;
  background-color: #fff8f0;
  border-radius: 10rpx;
  border-left: 4rpx solid #FF7A00;
}
.modal-footer {
  padding: 20rpx 30rpx;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
}
.save-btn {
  width: 100%;
  padding: 15rpx 0;
  background-color: #FF7A00;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(255, 122, 0, 0.3);
  transition: all 0.3s ease;
}
.save-btn:active {
  background-color: #e06a00;
  transform: scale(0.98);
}
.save-btn[disabled] {
  background-color: #ffcc99;
  color: #fff;
}

/* 实用提示 */
.tips-container {
  overflow: hidden;
}
.tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20rpx;
}
.tip-card {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  transform-origin: center top;
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: calc(var(--animation-order) * 0.1s);
  opacity: 0;
}
.tip-card:nth-child(1) { --animation-order: 1; }
.tip-card:nth-child(2) { --animation-order: 2; }
.tip-card:nth-child(3) { --animation-order: 3; }
.tip-card:hover {
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
  transform: translateY(-4rpx);
}
.tip-header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tip-header.expanded {
  background-color: #fff8f0;
}
.tip-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
  color: #FF7A00;
  transition: transform 0.3s ease;
}
.tip-header.expanded .tip-icon {
  transform: rotate(15deg);
}
.tip-title {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.tip-toggle {
  font-size: 32rpx;
  color: #999;
  transition: transform 0.3s ease;
}
.tip-header.expanded .tip-toggle {
  transform: rotate(45deg);
  color: #FF7A00;
}
.tip-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  padding: 0 30rpx;
}
.tip-content.expanded {
  max-height: 1000rpx;
  padding-bottom: 30rpx;
}
.tip-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
  line-height: 1.5;
}
.tip-items {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}
.tip-item {
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(10rpx);
  animation: fadeIn 0.5s ease forwards;
  animation-delay: calc(var(--item-order) * 0.05s);
}
.tip-item:nth-child(1) { --item-order: 1; }
.tip-item:nth-child(2) { --item-order: 2; }
.tip-item:nth-child(3) { --item-order: 3; }
.tip-item:nth-child(4) { --item-order: 4; }
.tip-item:nth-child(5) { --item-order: 5; }
.item-icon {
  font-size: 22rpx;
  color: #FF7A00;
  margin-right: 15rpx;
  margin-top: 4rpx;
}
.item-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
}

/* 动画效果 */
.animate-content {
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 50rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 122, 0, 0.8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.2);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.back-to-top[style*="display: block"] {
  opacity: 1;
}
.back-to-top:active {
  background-color: rgba(255, 122, 0, 1);
}

/* 工具类 */
.stop-propagation {
  pointer-events: auto;
}
</style>